<template>
  <v-content>
    <v-container fluid fill-height class="login-container" @keydown.enter="login">
      <v-layout align-center justify-center>
        <span class="welcome-label title"><v-icon color="white">settings</v-icon>欢迎登录帅帅互娱后台管理系统.</span>
        <v-flex xs12 sm5 md4>
          <v-card class="elevation-12">
            <v-toolbar dark color="grey darken-3">
              <v-toolbar-title>
                <v-icon>cast_connected</v-icon>
                后台管理</v-toolbar-title>
              <v-spacer></v-spacer>
            </v-toolbar>
            <v-card-text>
              <v-layout row wrap justify-center class="pt-3">
                <v-flex md10>
                  <v-form>
                    <v-text-field v-model="username" :error="usernameError" :rules="usernameRules" prepend-icon="person" name="login" label="请输入用户名" type="text"></v-text-field>
                    <v-text-field  v-model="password" :error="passwordError" :rules="passwordRules" prepend-icon="lock" name="password" :append-icon="showPwd ? 'visibility' : 'visibility_off'" :append-icon-cb="() => (showPwd = !showPwd)" label="请输入密码" id="password" :type="showPwd ? 'text' : 'password'"></v-text-field>
                  </v-form>
                </v-flex>
              </v-layout>
            </v-card-text>
            <v-card-actions class="py-4">
              <v-tooltip bottom>
                <span class="forget-button subheading ml-5" color="normal" slot="activator">忘记密码?</span>
                <span class="subheading">请联系管理员进行密码修改</span>
              </v-tooltip>
              <v-spacer></v-spacer>
              <v-flex md3 >
                <v-btn @click="login" large round class="login-button subheading" color="primary">登&nbsp;录</v-btn>
              </v-flex>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
      <v-footer absolute dark class="pa-3">
        <v-spacer></v-spacer>
        <div>版权所有&nbsp; &copy; {{ new Date().getFullYear() }}</div>
      </v-footer>
      <v-snackbar color="red" :timeout="timeout" top v-model="snackbar">
        <span class="title">{{ snackText }} </span>
        <v-btn flat color="white" @click.native="snackbar = false">
          <v-icon>cancel</v-icon>
        </v-btn>
    </v-snackbar>
    </v-container>
  </v-content>
</template>


<script>
import axios from "../../api";
export default {
  data: () => ({
    username: "",
    password: "",
    showPwd: false,
    usernameError: false,
    passwordError: false,
    usernameRules: [
      value => {
        if (value === "") {
          return "请输入用户名";
        } else {
          return true;
        }
      }
    ],
    passwordRules: [
      value => {
        if (value === "") {
          return "请输入密码";
        } else {
          return true;
        }
      }
    ],
    timeout: 5000,
    snackbar: false,
    snackText: ""
  }),
  mounted() {},
  methods: {
    login() {
      if (this.username === "" || this.password === "") {
        return;
      }
      // axios.defaults.headers.permission = `post,/login`
      // 登录处理
      axios
        .post("/login", {
          username: this.username,
          passwd: this.password
        })
        .then(res => {
          console.error(res)
          let data = res.data
          if (data.result === 0) {
            let areaCode = data.data.wechatInfo.infoList[0].areaCode;
            Cookie.set("username", this.username);
            Cookie.set("areaCode", areaCode);
            sessionStorage.setItem("token", data.data.vo.ticket);
            // 存储公众号
            sessionStorage.setItem(
              "infoList",
              JSON.stringify(data.data.wechatInfo.infoList)
            );
            // 存储菜单
            localStorage.setItem("tree", JSON.stringify(data.data.tree));
            // this.changeAreaCode({areaCode})
            // this.$router.push("/userdata");
            this.$emit('login', {data: data.data}); // 触发Root里的@login事件
          } else {
            this.snackbar = true;
            this.snackText = data.message;
          }
        });

      // 登录接口
      // const opt = {
      //   method: "POST",
      //   url: "/login",
      //   data: {
      //     username: this.username,
      //     passwd: this.password
      //   }
      // };
      // this.$http(opt, data => {
      //   if (data.result === 0) {
      //     Cookie.set("username", this.username);
      //     Cookie.set("token", data.data.vo.ticket);
      //     // 存储公众号
      //     sessionStorage.setItem(
      //       "infoList",
      //       JSON.stringify(data.data.wechatInfo.infoList)
      //     );
      //     // 存储菜单
      //     localStorage.setItem("tree", JSON.stringify(data.data.tree));
      //     let areaCode = data.data.wechatInfo.infoList[0].areaCode;
      //     // this.changeAreaCode({areaCode})
      //     this.$router.push("/userdata");
      //   } else {
      //     this.snackbar = true;
      //     this.snackText = data.message;
      //   }
      // });
    },
    forgetPswd() {}
  }
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100%;
  height: 100%;
  background-image: url(../../img/login/bg.jpg);
  display: flex;
  align-items: center;
  position: relative;
  .welcome-label {
    position: absolute;
    left: 1rem;
    top: 1rem;
    color: white;
  }
  // .login-button {
  //   width: 15rem;
  //   font-size: 1.6rem;
  // }
}
</style>
